<template>
	<div class="kaohe">
		<div class="content">
			<ul class="top">
				<li class="top1">
					<span>考核人：{{userRealName}}</span>
					<span>{{index}}/{{persons.length}}</span>
				</li>
				<li class="top2">部门及职务：{{deptName}}</li>
			</ul>
			<form @submit.prevent="submit" id="form">
				<div class="form-list">
					<div class="label">党性修养(10分)：</div>
					<input type="number" name="partyCulture" data-score="10" @change="changeInput($event)">
				</div>
				<div class="form-list">
					<div class="label">思想品质(10分)：</div>
					<input type="number" name="ideology" data-score="10" @change="changeInput($event)">
				</div>
				<div class="form-list">
					<div class="label">工作思路/组织协调(10分)：</div>
					<input type="number" name="workThoughts" data-score="10" @change="changeInput($event)">
				</div>
				<div class="form-list">
					<div class="label">依法办事/心理素质(10分)：</div>
					<input type="number" name="law" data-score="10" @change="changeInput($event)">
				</div>
				<div class="form-list">
					<div class="label">精神状态/努力程度(5分)：</div>
					<input type="number" name="mentality" data-score="5" @change="changeInput($event)">
				</div>
				<div class="form-list">
					<div class="label">工作作风(10分)：</div>
					<input type="number" name="workStyle" data-score="5" @change="changeInput($event)">
				</div>
				<div class="form-list">
					<div class="label">履行职责成效(20分)：</div>
					<input type="number" name="performDuties" data-score="20" @change="changeInput($event)">
				</div>
				<div class="form-list">
					<div class="label">解决复杂问题(10分)：</div>
					<input type="number" name="solveProblems" data-score="10" @change="changeInput($event)">
				</div>
				<div class="form-list">
					<div class="label">廉洁自律(10分)：</div>
					<input type="number" name="honest" data-score="10" @change="changeInput($event)">
				</div>
				<div class="form-list">
					<div class="label">履行廉政职责(5分)：</div>
					<input type="number" name="performance" data-score="5" @change="changeInput($event)">
				</div>
				<div class="btn">
					<button type="submit">提交</button>
				</div>
			</form>
		</div>
	</div>
</template>

<script>
	import $ from '_jquery@3.4.1@jquery'
	import People from '@/data/people.js'
	export default {
		name: "kaohe",
		data() {
			return {
				userRealName: "",
				deptName: "",
				userName: "",
				persons: [],
				index: 1,

			}
		},
		created() {
			this.index = localStorage.getItem('ti_index') ? Number(localStorage.getItem('ti_index')) : 1;
			this.getData()
		},
		mounted() {

		},
		methods: {
			changeInput(e) {
				let label = $(e.target);
				if(label.val() > Number(label.data('score'))) {
					this.$toast('输入分数有误');
					label.val("")
					return
				}
			},
			getData() {
				//  请求数据
				this.$http.post('/assessment/assessor/mobile_all_list', {}).then(res => {
					if(res.code == 0) {
						//成功后赋值
						this.persons = res.data;
						let obj = this.persons[this.index - 1];
						this.userRealName = obj.userRealName;
						this.deptName = obj.deptName;
						this.userName = obj.userName;
					}
				})
			},
			submit(e) {
				var data = {};
				var t = $('form').serializeArray();
				$.each(t, function() {
					data[this.name] = Number(this.value);
				});
				data.assessorId = this.persons[this.index - 1].id;
				data.userName = this.persons[this.index - 1].userName;
				let form = new FormData()
				for(let key in data) {
					if(!data[key]) {
						this.$toast('参数不能为空');
						return
					}
					form.append(key, data[key])
				}
				this.$http.post('/assessment/assessTable/mobile_main_save', form).then(res => {
					console.log(res)
					if(res.code == 0) {
						localStorage.setItem('ti_index', this.index + 1)
						if(this.index >= this.persons.length) {
							localStorage.removeItem('ti_index')
						}
						this.index += 1;
						let obj = this.persons[this.index - 1];
						this.userRealName = obj.userRealName;
						this.deptName = obj.deptName;
						$('input').val("");

					} else {
						this.$toast(res.msg)
						if(res.code == 1) {
							localStorage.setItem('ti_index', this.index + 1)
							if(this.index >= this.persons.length) {
								localStorage.removeItem('ti_index')
							}
							this.index += 1;
							let obj = this.persons[this.index - 1];
							this.userRealName = obj.userRealName;
							this.deptName = obj.deptName;
							$('input').val("");
						}
					}
				})

			}
		}
	}
</script>

<style scoped lang="less">
	.kaohe {
		.content {
			margin: 30px auto;
			width: 345px;
			min-height: 400px;
			border: 1px solid skyblue;
			border-radius: 5px;
			padding-bottom: 30px;
		}
		.top {
			border-bottom: 1px solid skyblue;
			height: 60px;
			padding: 5px;
			box-sizing: border-box;
			font-size: 15px;
			line-height: 25px;
		}
		.top1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.form-list {
			display: flex;
			margin-top: 10px;
			justify-content: center;
			align-items: center;
			.label {
				width: 50%;
				text-align: right;
				font-size: 14px;
				color: #333;
			}
			input {
				width: 30%;
				height: 24px;
				font-size: 14px;
				border: 1px solid #ddd;
				padding-left: 5px;
				box-sizing: border-box;
			}
		}
		.btn {
			margin-top: 50px;
			text-align: center;
			button {
				width: 100px;
				height: 36px;
				background: skyblue;
				color: white;
				font-size: 15px;
				border-radius: 5px
			}
		}
	}
</style>